<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
	<style>
		.box{
			width:100px; height:100px; background:red;
		}
		.box22{
			background:yellowgreen; width:100px; height:300px;
		}
	</style>
 </head>
 <body>
		<img src="img/1.jpg" id="photo"/>
		<a href="http://www.baidu.com" id="link">百度</a>
		<input type="text" id="txt" value="哈哈" />
		<div class="box" id="box"></div>
 </body>
</html>
<script>
	//获取元素
	var oImg = document.getElementById('photo');
	var oLink = document.getElementById('link');
	var oTxt = document.getElementById('txt');
	var oBox = document.getElementById('box');

	//点语法得到
	console.log(oImg.src);
	console.log(oLink.href);
	console.log(oTxt.value);
	//就是因为class是JS里面保留,所以这里不能用？JS提供了一个专门用来操作类名属性:className
	//console.log(oBox.class);//undefined
	console.log(oBox.className);//
	
	//点语法设置
	oImg.src = 'img/2.jpg';
	oLink.href = 'http://www.ucai.cn';
	//oTxt.value = '嘻嘻';
	oBox.className = 'box22';

	//setAttribute()方法,传两个参数，第一个为元素属性名，第二个为值
	oTxt.setAttribute('value', '长沙');
	oImg.setAttribute('src', 'img/1.jpg');
	console.log(oBox.getAttribute('className'));
	console.log(oImg.getAttribute('src'));
</script>
